<template>
    <div>
        <el-table id="elTable" v-loading="isLoading" :data="columns" @sort-change="sortChange" v-on="$listeners" :props="$props"
                  v-bind="$attrs" empty-text style="width: 100%" :height="$store.state.tableStore.tableHeight">
            <el-table-column
                    type="selection"
                    width="50px"
                     sortable show-overflow-tooltip fixed v-if="isSelection">
            </el-table-column>
            <el-table-column type="expand" width="50px" v-if="isOpen">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" >
                        <el-form-item :label="header.label" v-if="header.isOpen" v-for="(header,index) in tableHeader" :key="index">
                            <span>{{ props.row[header.prop] }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column v-if="!header.isOpen" v-for="(header,index) in tableHeader" :key="index"
                             :prop="header.prop"
                             :label="header.label"
                             sortable show-overflow-tooltip>
            </el-table-column>
            <slot name="tableMain"></slot>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.currentPage"
                :page-sizes="pageSizes"
                :page-size="page.pageSize"
                layout="total,prev, pager, next, jumper,sizes"
                :total="total"
                style="float: right">
        </el-pagination>
    </div>
</template>

<script>
    /**
     * table组件的封装
     */
    import httpclient from 'httpclient';
    export default {
        props: {
            isSort: false,//是否开启字段排序图标功能，默认关闭
            isOpen:false,//是否使用展开表格
            isSelection:false,//是否开启全选按钮
            tableHeader: {
                type: Array,
                default() {
                    return [];
                }
            },
            api: {
                type: Object
            },
            pageSizes: {
                type: Array,
                default() {
                    return [10, 20, 30, 40, 50, 100];
                }
            },
            pageSize: {
                type: Number,
                default: 10
            },
            params: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data: function () {
            return {
                columns: [],
                total: 0,
                page: {
                    currentPage: 1,
                    pageSize: 10
                },
                isLoading: true,
                order: null,
            };
        },
        mounted: function () {
            this.loadData();
        },
        beforeUpdate:function(){
            this.init();
        },
        watch: {
            '$route'() {
                this.init();
            }
        },
        methods: {
            init:function(){
                let offsetTop = document.getElementById("elTable");
                if(null === offsetTop){
                    let innerHeight = window.innerHeight  - 230;
                    this.$store.commit("setTableHeight",innerHeight);
                }else{
                    let elementAside = window.innerHeight - offsetTop.offsetTop - 230;
                    this.$store.commit("setTableHeight",elementAside);
                }
            },
            sortChange: function (column) {
                //单个排序列
                if (column.prop) {
                    this.order = {
                        property: column.prop,
                        direction: column.order === "descending" ? "DESC" : "ASC"
                    };
                    this.loadData();
                }
            },
            handleSizeChange: function (val) {
                this.page.pageSize = val;
                this.loadData();
            },
            handleCurrentChange: function (val) {
                this.page.currentPage = val;
                this.loadData();
            },
            loadData: function () {
                this.params.pageNum = this.page.currentPage;
                this.params.pageSize = this.page.pageSize;
                this.params.order = this.page.order;
                httpclient.sendPost(this.api, this.params).done((res) => {
                    this.total = parseInt(res.data.total);
                    this.columns = res.data.list;
                    this.isLoading = false;
                }).fail(() => {
                    this.isLoading = false;
                });
            }
        }
    };
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

</style>
